@extends('mobile.static_pages.template.bootstrap')
@section('title', '目录')
@section('scripts')
<link rel="stylesheet" href="{{ asset('css/mobile-catalog.css') }}" />
@endsection
@section('content')
<section class="title">
	<div class="row">
		<div class="col-xs-2">
			<span class="fa fa-fw fa-angle-left fa-lg"></span>
		</div>
		<div class="col-xs-8">
			<div class="title dotdotdot-nowrap">民调异闻录之神奇 - 共1023章</div>
		</div>
		<div class="col-xs-2">
			<span class="text-muted text-right">书架</span>
		</div>
	</div>
</section>
<section class="filter">
	<div class="flex-container">
		<select class="chapters">
			<option value="">1-50章</option>
			<option value="">50-100章</option>
			<option value="">100-150章</option>
			<option value="">150-200章</option>
			<option value="">250-300章</option>
		</select>
		<a href="#" class="btn btn-default">
			<span class="fa fa-fw fa-arrow-down"></span>
			反序
		</a>
	</div>
</section>
<img width="100%" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504174664186&di=6e31fcc0d1c93f0cf1229273fa4ef4ac&imgtype=0&src=http%3A%2F%2Fsw.wenxuncn.com%2Fuploadfile%2F2015%2F0320%2F20150320090828519.jpg" alt="">
<section class="chapters">
	<ul class="list" datas>
		<li class="active" data><a class="dotdotdot-nowarp" href="#">1、第1章：初次见面</a></li>
		@for($i=2; $i<30; $i++)
		<li data>
			<a class="dotdotdot-nowrap" href="#">{{$i}}、 第{{$i}}章：不死药</a>
		</li>
		@endfor
	</ul>
</section>
<section class="filter">
	<div class="row">
		<div class="col-xs-3" style="padding-right: 10px;">
			<a href="#" class="btn btn-default btn-block">上一页</a>
		</div>
		<div class="col-xs-6">
			<select class="chapters">
				<option value="">1-50章</option>
				<option value="">50-100章</option>
				<option value="">100-150章</option>
				<option value="">150-200章</option>
				<option value="">250-300章</option>
			</select>
		</div>
		<div class="col-xs-3" style="padding-left: 10px;">
			<a href="#" class="btn btn-default btn-block">下一页</a>
		</div>
	</div>
</section>
@endsection


















